<template>
  <div class="container">
    <!-- 顶部标题栏 -->
    <div class="header">
      <!-- 左侧标题加图标 -->
      <div class="title">
        <el-icon><Memo /></el-icon>
        <span>经营数据</span>
      </div>

      <!-- 右侧时间选择器 -->
      <div class="right">
        <span>选择日期：</span>
        <el-date-picker
          @change="handleDateChange"
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          size="default" />
      </div>
    </div>

    <!-- 中间图标区域 -->
    <div class="middle">
      <!-- 第一个图表  订单总额-->
      <div class="row-item">
        <!-- 左侧标题 加金额 -->
        <div class="left">
          <span>今日订单总额(元)</span>
          <span>{{ todayOrderTotal }}</span>
        </div>
        <!-- 右侧图标 -->
        <div class="right">
          <el-icon><PieChart /></el-icon>
        </div>
      </div>

      <!-- 第二个图表 订单总数 -->
      <div class="row-item" style="background-color: #9150e8">
        <!-- 左侧标题 加金额 -->
        <div class="left">
          <span>今日订单总额(元)</span>
          <span>{{ todayOrderCount }}</span>
        </div>
        <!-- 右侧图标 -->
        <div class="right">
          <el-icon><Sugar /></el-icon>
        </div>
      </div>

      <!-- 第三个图表 新增用户数 -->
      <div class="row-item" style="background-color: #458efd">
        <!-- 左侧标题 加金额 -->
        <div class="left">
          <span>今日新增用户数</span>
          <span>{{ todayNewUserCount }}</span>
        </div>
        <!-- 右侧图标 -->
        <div class="right">
          <el-icon><User /></el-icon>
        </div>
      </div>

      <!-- 第四个图表 新增商户 -->
      <div class="row-item" style="background-color: #ff7823">
        <!-- 左侧标题 加金额 -->
        <div class="left">
          <span>今日新增商户</span>
          <span>{{ todayNewMerchantCount }}</span>
        </div>
        <!-- 右侧图标 -->
        <div class="right">
          <el-icon><Eleme /></el-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getRowOneDataApi } from "@/api/dashboard/dashboard";

//选择的日期范围
const dateRange = ref([]);
//今日订单总额
const todayOrderTotal = ref(1000.0);
//今日订单总数
const todayOrderCount = ref(100);
//今日新增用户数
const todayNewUserCount = ref(100);
//今日新增商户
const todayNewMerchantCount = ref(260);

// 获取数据函数
function getRowOneData(dataRange) {
  const startTime = ref(null);
  const endTime = ref(null);

  if (dataRange && dataRange.length === 2 && dataRange[0] && dataRange[1]) {
    // 由于 value-format="YYYY-MM-DD"，val 中的值已经是字符串格式
    console.log("选择的日期范围：" + dataRange);

    // 传递完整日期 给参数赋值 修改参数格式为 HH:mm:ss
    startTime.value = dataRange[0] + " 00:00:00";
    endTime.value = dataRange[1] + " 23:59:59";
  }

  //调用后端接口 传递日期时间格式 然后获取数据
  return getRowOneDataApi(startTime.value, endTime.value)
    .then((res) => {
      console.log(res);
      //赋值给响应式变量
      todayOrderTotal.value = res.data.orderTotal;
      todayOrderCount.value = res.data.orderCount;
      todayNewUserCount.value = res.data.newUserCount;
      todayNewMerchantCount.value = res.data.newMerchantCount;
    })
    .catch((err) => {
      console.log(err);
    });
}

//处理日期时间改变
const handleDateChange = (val) => {
  // 检查是否选择了完整的日期范围
  if (val && val.length === 2 && val[0] && val[1]) {
    // 由于 value-format="YYYY-MM-DD"，val 中的值已经是字符串格式
    console.log("选择的日期范围：" + val);

    // 调用后端接口获取数据
    getRowOneData(val);

    // 延迟清空，让打印完成后再清空
    setTimeout(() => {
      dateRange.value = [];
    }, 0);
  }
};

// start 传递消息给RowTwo组件 =============================
//rowOne组件 消息发布者，用来触发事件传递消息
import emitter from "@/utils/emitter";

// rowTwo组件绑定事件，写好事件触发函数后，
//这里消息发布者触发事件传递新增用户数

//页面加载时调用接口获取数据
onMounted(async () => {
  //这里必须异步等待获取消息后在传递新增用户数，下面是同步执行，这个是异步执行的
  await getRowOneData(dateRange.value);
  // 传递新增商户数
  emitter.emit("sendUserCount", todayNewUserCount.value);
});

//监听 新增用户数据变化，如果变化 触发绑定事件 更新数据
watch(todayNewUserCount, (newCount) => {
  console.log("监听到新增用户数变化:", newCount);

  emitter.emit("sendUserCount", newCount);
});
//end 传递消息给RowTwo组件 =================================
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 20px;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    box-sizing: border-box;
    border-bottom: 1px solid #333;
    padding-bottom: 15px;

    .title {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 16px;
      font-weight: 600;
      color: #333;
    }
  }

  /**中间4个图表区域 */
  .middle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 120px;
    box-sizing: border-box;

    .row-item {
      width: 18%;
      background-color: #34cc5f;
      height: 100%;
      box-sizing: border-box;
      display: flex;
      justify-content: space-evenly;
      align-items: center;

      .left {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-size: 20px;
        font-weight: 500;
        color: #fff;
      }
      .right {
        font-size: 30px;
        color: #fff;
        font-weight: 600;
      }
    }
  }
}
</style>
